<template>
    <div class="video-detail-component-box">
        <router-link
            :to="{path:`/ContentDisplay/VideoPlay/${videoData.id}`, query:{item:0}}"
        >
            <img class="video-seal" :src="videoData.cover" alt=""/>
        </router-link>
        <div class="video-info-box">
            <router-link
                class="video-info-item video-title"
                :to="{path:`/ContentDisplay/VideoPlay/${videoData.id}`, query:{item:0}}"
            >
                {{videoData.title || '--`'}}
            </router-link>
            <div class="video-info-item">{{`主讲人：${videoData.author || '--'}`}}</div>
            <div class="video-info-item">{{`提供机构：${videoData.from || '--'}`}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "VideoDetailComponent",
    props:{
        videoData:{
            type:Object,
            default(){
                return {}
            }
        }
    }

}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";

@media only screen and (max-width: 576px){
    @width:42vw;
    @height:40vw;
    .video-detail-component-box{
        .video-seal{
            width:@width;
            height:calc(@height - 12vw);
            display:block;
            box-shadow: 0 0 1px grey;
            object-fit: cover;
        }
        .video-info-box{
            width:@width;
            height:12vw;
            .video-info-item{
                font-size:3vw;
                height:4vw;
                line-height:4vw;
                font-weight: normal;
                .line-ellipsis(1);
                color:black;
            }
            .video-title{
                font-weight: bold;
            }
        }
    }

}

@media only screen and (min-width: 576px){
    @width:185px;
    @height:180px;
    .video-detail-component-box{
        .video-seal{
            width:@width;
            height:calc(@height / 3 * 2);
            display:block;
            box-shadow: 0 0 1px grey;
            object-fit: cover;
        }
        .video-info-box{
            width:@width;
            height:calc(@height / 3);
            .video-info-item{
                font-size:12px;
                line-height:18px;
                font-weight: normal;
                .line-ellipsis(1);
                color:black;
            }
            .video-title{
                font-weight: bold;
            }
        }
    }

}
</style>